<template>
  <n-form-item label="接口名称" path="info">
    <n-input v-model:value="formItem.info"/>
  </n-form-item>
  <n-form-item label="真实类库" path="api_class">
    <n-input v-model:value="formItem.api_class"/>
  </n-form-item>
  <n-form-item label="请求方式" path="method">
    <n-select v-model:value="formItem.method" style="width: 310px;margin-right: 8px" :options="formOptions.method"/>
    <n-tooltip trigger="hover">
      <template #trigger>
        <n-button strong secondary circle type="primary">
          <template #icon>
            <n-icon>
              <component :is="'ionicons5-HelpOutline'"></component>
            </n-icon>
          </template>
        </n-button>
      </template>
      请注意：这里所配置的请求方式，将兼容Access-Token的获取方式，比如，当前接口允许使用GET请求，那么系统将会识别GET参数中的Access-Token。
    </n-tooltip>
  </n-form-item>
  <n-form-item label="接口映射" path="hash">
    <n-input v-model:value="formItem.hash" disabled style="width: 310px;margin-right: 8px"/>
    <n-tag :bordered="false" type="error" size="large">
      系统自动生成，不允许修改
    </n-tag>
  </n-form-item>
  <n-form-item label="请求间隔" path="limit">
    <n-input-number v-model:value="formItem.limit" style="width: 310px;margin-right: 8px" />
    <n-tag :bordered="false" type="error" size="large">
      0表示不限制，单位秒
    </n-tag>
  </n-form-item>
  <n-form-item label="访问模式" path="auth">
    <n-select v-model:value="formItem.auth" :options="formOptions.auth"/>
  </n-form-item>
  <n-form-item label="日志记录" path="log">
    <n-select v-model:value="formItem.log" :options="formOptions.log"/>
  </n-form-item>
  <n-form-item label="测试模式" path="is_test">
    <n-select v-model:value="formItem.is_test" :options="formOptions.test"/>
  </n-form-item>
</template>
<script lang="ts" setup>
import {ref, watch} from "vue"
import {formOptions} from "@/view/open/interface/data";

const props = defineProps({
  formItem: {
    type: Object,
    required: true
  }
})
const emits = defineEmits(["update:formItem"])
const formItem = ref(props.formItem)

watch(formItem, () => {
  emits("update:formItem", formItem.value)
})

</script>
